// const path = require('path');
// const ESLintPlugin = require('eslint-webpack-plugin');
import path from "path";
import ESLintWebpackPlugin from 'eslint-webpack-plugin';
import HtmlWebpackPlugin from "html-webpack-plugin";
import {fileURLToPath} from "url";
import TerserPlugin from 'terser-webpack-plugin';
import os from 'os'
import ImageMinimizerPlugin from "image-minimizer-webpack-plugin";

const threads = os.cpus().length

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);
export default {
    entry: './src/main.js', // 入口文件 相对路径
    output: {
        // path: path.resolve(__dirname, '../dist'), // __dirname是nodejs的变量 表示当前文件所在目录的绝对路径
        path: undefined, // 开发模式没有输出
        filename: "static/js/main.js", // 将 js 文件输出到 static/js 目录中
        // clean: true, // 自动将上次打包目录资源清空
    },
    module: {
        rules: [
            {
                oneOf: [ // 每个文件只能被其中一个loader配置处理，提高打包速度
                    {
                        test: /\.css$/, use: ['style-loader', 'css-loader'], // 执行顺序从右到左从下到上
                    }, {
                        test: /\.less$/, use: [// compiles Less to CSS
                            'style-loader', 'css-loader', 'less-loader',],
                    }, {
                        test: /\.s[ac]ss$/, use: [// 将 JS 字符串生成为 style 节点
                            'style-loader', // 将 CSS 转化成 CommonJS 模块
                            'css-loader', // 将 Sass 编译成 CSS
                            'sass-loader',],
                    }, {
                        test: /\.styl$/, use: [// 将 JS 字符串生成为 style 节点
                            'style-loader', // 将 CSS 转化成 CommonJS 模块
                            'css-loader', // 将 Sass 编译成 CSS
                            'stylus-loader',],
                    }, {
                        test: /\.(png|jpe?g|gif|webp)$/, type: "asset", parser: {
                            dataUrlCondition: {
                                maxSize: 10 * 1024 // 小于10kb的图片会被base64处理
                                // 优点：减少请求数量
                                // 缺点：图片体积会变大
                            }
                        }, generator: {
                            // 将图片文件输出到 static/imgs 目录中
                            // 将图片文件命名 [hash:8][ext][query]
                            // [hash:8]: hash值取8位
                            // [ext]: 使用之前的文件扩展名
                            // [query]: 添加之前的query参数
                            filename: "static/imgs/[hash:8][ext][query]",
                        },
                    }, {
                        test: /\.(ttf|woff2?|mp4|mp3|avi)$/, type: "asset/resource", generator: {
                            filename: "static/media/[hash:8][ext][query]",
                        },
                    }, {
                        test: /\.js$/,
                        // exclude: /node_modules/, // 排除node_modules代码不编译
                        include: path.resolve(__dirname, "../src"), // 也可以用包含
                        loader: "babel-loader",
                        options: { // 此处也可以单独写在babel的配置文件里
                            // presets: ["@babel/preset-env"],
                            cacheDirectory: true, // 开启babel编译缓存
                            cacheCompression: false, // 关闭缓存压缩 doesn't work with webpack 5
                            plugins: ["@babel/plugin-transform-runtime"], // 减少代码体积
                        },
                    },
                ]
            }
        ]
    },
    plugins: [
        new ESLintWebpackPlugin({
            // 指定检查文件的根目录
            context: path.resolve(__dirname, "../src"), // 指定检查文件的根目录
            exclude: "node_modules",
            cache: true,
            cacheLocation: path.resolve(
                __dirname,
                "../node_modules/.cache/.eslintcache"
            ),
            threads, // 开启多进程
        }),
        new HtmlWebpackPlugin({
            // 以 public/index.html 为模板创建文件
            // 新的html文件有两个特点：1. 内容和源文件一致 2. 自动引入打包生成的js等资源
            template: path.resolve(__dirname, "../public/index.html"),
        })
    ],
    // 开发服务器
    devServer: {
        host: "localhost", // 启动服务器域名
        port: "3000", // 启动服务器端口号
        open: true, // 是否自动打开浏览器
        hot: true // 是否开启 HMR 功能,默认是开启的
    },
    mode: "development",
    devtool: "cheap-module-source-map", // 只包含行映射, 不包含列映射，打包编译速度快
}